<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="isolated-components-container"></div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/cropper.min.js"></script>
<script>
    class IsolatedComponent extends HTMLElement {
        constructor() {
            super();

            // 创建Shadow DOM实现样式隔离
            const shadow = this.attachShadow({ mode: 'open' });

            // 组件内部样式 - 完全隔离
            const style = document.createElement('style');
            style.textContent = `
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                }

                body {
                    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                    min-height: 100vh;
                    padding: 20px;
                    color: #333;
                }

                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 20px;
                }

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 15px 0;
                    margin-bottom: 30px;
                    border-bottom: 1px solid rgba(0,0,0,0.1);
                }

                .logo {
                    font-size: 28px;
                    font-weight: 700;
                    color: #4361ee;
                    display: flex;
                    align-items: center;
                }

                .logo i {
                    margin-right: 10px;
                }

                .settings-btn {
                    background: #4361ee;
                    color: white;
                    border: none;
                    border-radius: 50%;
                    width: 50px;
                    height: 50px;
                    font-size: 22px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
                }

                .settings-btn:hover {
                    background: #3a56d4;
                    transform: rotate(30deg);
                    box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
                }

                .modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.6);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;
                }

                .modal-overlay.active {
                    opacity: 1;
                    visibility: visible;
                }

                .settings-modal {
                    background: white;
                    border-radius: 12px;
                    width: 90%;
                    max-width: 800px;
                    max-height: 90vh;
                    overflow: hidden;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                    transform: translateY(20px);
                    transition: transform 0.4s ease;
                }

                .modal-overlay.active .settings-modal {
                    transform: translateY(0);
                }

                .modal-header {
                    background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
                    color: white;
                    padding: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .modal-header h2 {
                    font-weight: 600;
                    font-size: 22px;
                }

                .close-btn {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 24px;
                    cursor: pointer;
                    transition: transform 0.3s ease;
                }

                .close-btn:hover {
                    transform: rotate(90deg);
                }

                .modal-body {
                    display: flex;
                    min-height: 500px;
                }

                .settings-tabs {
                    width: 200px;
                    background: #f8f9fa;
                    border-right: 1px solid #e9ecef;
                }

                .tab-btn {
                    display: block;
                    width: 100%;
                    padding: 16px 20px;
                    text-align: left;
                    border: none;
                    background: none;
                    font-size: 16px;
                    color: #495057;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    border-left: 4px solid transparent;
                }

                .tab-btn i {
                    width: 24px;
                    margin-right: 10px;
                }

                .tab-btn:hover, .tab-btn.active {
                    background: #e9ecef;
                    color: #4361ee;
                    border-left: 4px solid #4361ee;
                }

                .settings-content {
                    flex: 1;
                    padding: 25px;
                    overflow-y: auto;
                }

                .tab-content {
                    display: none;
                }

                .tab-content.active {
                    display: block;
                    animation: fadeIn 0.4s ease;
                }

                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }

                .section-title {
                    font-size: 20px;
                    margin-bottom: 25px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #e9ecef;
                    color: #4361ee;
                }

                .form-group {
                    margin-bottom: 20px;
                }

                label {
                    display: block;
                    margin-bottom: 8px;
                    font-weight: 500;
                    color: #495057;
                }

                input[type="text"],
                input[type="password"],
                input[type="email"],
                textarea {
                    width: 100%;
                    padding: 12px 15px;
                    border: 1px solid #ced4da;
                    border-radius: 6px;
                    font-size: 16px;
                    transition: border 0.3s ease;
                }

                input:focus,
                textarea:focus {
                    outline: none;
                    border-color: #4361ee;
                    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
                }

                .avatar-section {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 30px;
                    margin-bottom: 30px;
                }

                .current-avatar {
                    flex: 0 0 150px;
                }

                .current-avatar img {
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 3px solid #4361ee;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                }

                .avatar-upload {
                    flex: 1;
                    min-width: 300px;
                }

                .upload-btn {
                    display: inline-block;
                    padding: 10px 20px;
                    background: #4361ee;
                    color: white;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: background 0.3s ease;
                    margin-bottom: 15px;
                }

                .upload-btn:hover {
                    background: #3a56d4;
                }

                #avatar-input {
                    display: none;
                }

                .crop-container {
                    display: none;
                    margin-top: 20px;
                }

                .crop-preview {
                    width: 100%;
                    height: 300px;
                    background: #f8f9fa;
                    border: 1px dashed #ced4da;
                    border-radius: 6px;
                    overflow: hidden;
                    margin-bottom: 15px;
                }

                .crop-actions {
                    display: flex;
                    gap: 10px;
                }

                .btn {
                    padding: 10px 20px;
                    border: none;
                    border-radius: 6px;
                    font-size: 16px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }

                .btn-primary {
                    background: #4361ee;
                    color: white;
                }

                .btn-primary:hover {
                    background: #3a56d4;
                }

                .btn-secondary {
                    background: #6c757d;
                    color: white;
                }

                .btn-secondary:hover {
                    background: #5a6268;
                }

                .submit-section {
                    margin-top: 30px;
                    padding-top: 20px;
                    border-top: 1px solid #e9ecef;
                    text-align: right;
                }

                .submit-btn {
                    padding: 12px 30px;
                    font-size: 16px;
                    font-weight: 500;
                    background: #4361ee;
                    color: white;
                    border: none;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
                }

                .submit-btn:hover {
                    background: #3a56d4;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
                }

                .notification {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    padding: 15px 25px;
                    background: #4caf50;
                    color: white;
                    border-radius: 6px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    transform: translateX(120%);
                    transition: transform 0.4s ease;
                    z-index: 1100;
                }

                .notification.show {
                    transform: translateX(0);
                }

                @media (max-width: 768px) {
                    .modal-body {
                        flex-direction: column;
                    }

                    .settings-tabs {
                        width: 100%;
                        border-right: none;
                        border-bottom: 1px solid #e9ecef;
                        display: flex;
                        overflow-x: auto;
                    }

                    .tab-btn {
                        border-left: none;
                        border-bottom: 4px solid transparent;
                        text-align: center;
                        padding: 15px 10px;
                    }

                    .tab-btn i {
                        display: block;
                        margin: 0 auto 5px;
                    }

                    .tab-btn:hover, .tab-btn.active {
                        border-left: none;
                        border-bottom: 4px solid #4361ee;
                    }

                    .avatar-section {
                        flex-direction: column;
                    }
                }

                `;

            // 组件HTML结构
            const container = document.createElement('div');
            container.className = 'component-container';

            // 使用模板字符串创建组件内容
            container.innerHTML = `

<div class="container">
    <div class="header">
        <div class="logo">
            <i class="fas fa-comments"></i>
            网页聊天系统
        </div>
        <button class="settings-btn" id="settingsBtn">
            <i class="fas fa-cog"></i>
        </button>
    </div>

    <h1>欢迎使用网页聊天系统</h1>
    <p>点击右上角的设置按钮修改您的个人信息、密码和邮箱。</p>
</div>

<!-- 设置模态框 -->
<div class="modal-overlay" id="settingsModal">
    <div class="settings-modal">
        <div class="modal-header">
            <h2><i class="fas fa-cog"></i> 用户设置</h2>
            <button class="close-btn" id="closeModal">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="modal-body">
            <div class="settings-tabs">
                <button class="tab-btn active" data-tab="profile">
                    <i class="fas fa-user"></i> 个人信息
                </button>
                <button class="tab-btn" data-tab="password">
                    <i class="fas fa-lock"></i> 修改密码
                </button>
                <button class="tab-btn" data-tab="email">
                    <i class="fas fa-envelope"></i> 修改邮箱
                </button>
                <button class="tab-btn" data-tab="privacy">
                    <i class="fas fa-shield-alt"></i> 隐私设置
                </button>
                <button class="tab-btn" data-tab="notifications">
                    <i class="fas fa-bell"></i> 通知设置
                </button>
            </div>

            <div class="settings-content">
                <!-- 个人信息设置 -->
                <div class="tab-content active" id="profile">
                    <h3 class="section-title">个人信息设置</h3>

                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" value="张三">
                    </div>

                    <div class="form-group">
                        <label for="signature">个性签名</label>
                        <textarea id="signature" rows="3">热爱生活，热爱编程！</textarea>
                    </div>

                    <div class="avatar-section">
                        <div class="current-avatar">
                            <label>当前头像</label>
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
                        </div>

                        <div class="avatar-upload">
                            <label>上传新头像</label>
                            <div class="upload-btn" id="uploadTrigger">
                                <i class="fas fa-upload"></i> 选择图片
                            </div>
                            <input type="file" id="avatar-input" accept="image/*">

                            <div class="crop-container" id="cropContainer">
                                <div class="crop-preview" id="cropPreview"></div>
                                <div class="crop-actions">
                                    <button class="btn btn-primary" id="confirmCrop">
                                        <i class="fas fa-crop"></i> 确认裁剪
                                    </button>
                                    <button class="btn btn-secondary" id="cancelCrop">
                                        <i class="fas fa-times"></i> 取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="submit-section">
                        <button class="submit-btn" id="saveProfile">
                            <i class="fas fa-save"></i> 保存个人信息
                        </button>
                    </div>
                </div>

                <!-- 修改密码 -->
                <div class="tab-content" id="password">
                    <h3 class="section-title">修改密码</h3>

                    <div class="form-group">
                        <label for="currentPassword">当前密码</label>
                        <input type="password" id="currentPassword">
                    </div>

                    <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <input type="password" id="newPassword">
                    </div>

                    <div class="form-group">
                        <label for="confirmPassword">确认新密码</label>
                        <input type="password" id="confirmPassword">
                    </div>

                    <div class="submit-section">
                        <button class="submit-btn" id="savePassword">
                            <i class="fas fa-save"></i> 更新密码
                        </button>
                    </div>
                </div>

                <!-- 修改邮箱 -->
                <div class="tab-content" id="email">
                    <h3 class="section-title">修改邮箱</h3>

                    <div class="form-group">
                        <label for="currentEmail">当前邮箱</label>
                        <input type="email" id="currentEmail" value="zhangsan@example.com" disabled>
                    </div>

                    <div class="form-group">
                        <label for="newEmail">新邮箱地址</label>
                        <input type="email" id="newEmail">
                    </div>

                    <div class="form-group">
                        <label for="emailPassword">当前密码</label>
                        <input type="password" id="emailPassword">
                    </div>

                    <div class="submit-section">
                        <button class="submit-btn" id="saveEmail">
                            <i class="fas fa-save"></i> 更新邮箱
                        </button>
                    </div>
                </div>

                <!-- 其他设置选项 -->
                <div class="tab-content" id="privacy">
                    <h3 class="section-title">隐私设置</h3>
                    <!-- 隐私设置内容 -->
                </div>

                <div class="tab-content" id="notifications">
                    <h3 class="section-title">通知设置</h3>
                    <!-- 通知设置内容 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通知 -->
<div class="notification" id="notification">
    <i class="fas fa-check-circle"></i> <span id="notificationText">设置已成功更新！</span>
</div>

                `;

            // 添加按钮交互

            // 将样式和内容添加到Shadow DOM
            shadow.appendChild(style);
            shadow.appendChild(container);
        }
    }
    customElements.define('isolated-component', IsolatedComponent);
    container.innerHTML += `<isolated-component></isolated-component>`;

</script>
</body>
</html>